<template>
<div class="detile">
  <SubHeader :title="playlist.name"></SubHeader>
  <DetileTop :path="playlist.coverImgUrl" ref="top" class="aa"></DetileTop>
  <div class="detileb">
    <IscrollView ref="scrollview">
      <DetileBottom :playlist="playlist.tracks"></DetileBottom>
    </IscrollView>
  </div>

</div>
</template>

<script>
import SubHeader from '../components/Detile/SubHeader'
import DetileTop from '../components/Detile/DetileTop'
import DetileBottom from '../components/Detile/DetileBottom'
import IscrollView from '../components/IscrollView'

import { getPlaylist, getAlbums, getArtist } from '../api/index'
export default {
  name: 'Detile',
  components: {
    SubHeader,
    DetileTop,
    DetileBottom,
    IscrollView
  },
  data: function () {
    return {
      playlist: {}
    }
  },
  created () {
    if (this.$route.params.type === 'personalized') {
      getPlaylist({ id: this.$route.params.id })
        .then((data) => {
          console.log(data)
          this.playlist = data.playlist
        })
        .catch((error) => {
          console.log(error)
        })
    } else if (this.$route.params.type === 'albums') {
      getAlbums({ id: this.$route.params.id })
        .then((data) => {
          this.playlist = {
            name: data.album.name,
            coverImgUrl: data.album.picUrl,
            tracks: data.songs
          }
        })
        .catch((error) => {
          console.log(error)
        })
    } else if (this.$route.params.type === 'singer') {
      getArtist({ id: this.$route.params.id })
        .then((data) => {
          this.playlist = {
            name: data.artist.name,
            coverImgUrl: data.artist.picUrl,
            tracks: data.hotSongs
          }
        })
        .catch((error) => {
          console.log(error)
        })
    } else if (this.$route.params.type === 'rank') {
      getPlaylist({ id: this.$route.params.id })
        .then((data) => {
          this.playlist = data.playlist
        })
        .catch((error) => {
          console.log(error)
        })
    }
  },
  mounted () {
    const defHeight = this.$refs.top.$el.offsetHeight
    this.$refs.scrollview.scrolling((offsetY) => {
      if (offsetY < 0) {
        const scale = 10 * (Math.abs(offsetY) / defHeight)
        this.$refs.top.$el.style.filter = `blur(${scale}px)`
      } else {
        const scale = 1 + offsetY / defHeight
        this.$refs.top.$el.style.transform = `scale(${scale})`
      }
    })
  }
}
</script>

<style scoped lang="scss">
  @import "../assets/css/mixin";
  @import "../assets/css/variable";
.detile{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  @include bg_sub_color();
  .detileb{
    position: fixed;
    top: 500px;
    bottom: 0;
    left: 0;
    right: 0;
    /*overflow: hidden;*/
  }
}
</style>
